<template>
  <div class="box">
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="card">
          <div class="header">
            <label class="title">国内客户行业分布</label>
          </div>
          <div class="content">
            <div class="chart" id="pieCharts"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card">
          <div class="header">
            <label class="title">客户分布（散点图）</label>
          </div>
          <div class="content">
            <div class="chart" id="scatterCharts"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card">
          <div class="header">
            <label class="title">资金分布</label>
          </div>
          <div class="content">
            <div class="chart" id="ringCharts"></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="card">
          <div class="header">
            <label class="title">客户债券资产分配比例</label>
          </div>
          <div class="content">
            <div class="chart" id="fanCharts"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card">
          <div class="header">
            <label class="title">近五年客户券种资产配置走势</label>
          </div>
          <div class="content">
            <div class="chart" id="lineCharts"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-col :span="24">
            <div class="card row">
              <div class="col">
                <label class="title">{{ customerName }}</label>
                <label class="">{{ customerId }}</label>
              </div>
              <el-button class="btn" size="small" type="primary" @click="handleAdd">切换对象</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="card">
              <el-row>
                <el-col :span="24">
                  <div class="item">
                    <label>历史交易额</label>
                    <!-- <span><label class="value">{{ cumlativeAmount }}</label>万元</span> -->
                    <span><label class="value">{{ cumlativeAmount | filterNum }}</label>万元</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="item">
                    <label>交易频率</label>
                    <span><label class="value">{{ txFrequency }}</label>%</span>
                  </div>
                </el-col>
              </el-row>
              <el-table :data="tableData" height="230" style="width: 100%; margin-top: 10px;">
                <el-table-column prop="txnDt" label="交易日期" min-width="90" align="center">
                </el-table-column>
                <el-table-column prop="bondNm" label="债券简称" min-width="90" align="center">
                </el-table-column>
                <el-table-column prop="cumlativeAmount" label="交易规模" :formatter="formatterNum" min-width="90"
                  align="center">
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog title="请选择" :before-close="handleClose" :visible.sync="dialogVisible" width="50%">
      <el-row>
        <el-col :span="24">
          <div class="form-item">
            <label class="label">客户编号</label>
            <el-select v-model="customerId" placeholder="请选择" clearable filterable remote reserve-keyword
              :remote-method="queryCustomerIdcommon" :loading="loading">
              <el-option v-for="item in customerNameOptions" :key="item.value" :label="item.value" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="form-item">
            <label class="label">客户名称</label>
            <el-select v-model="customerId" placeholder="请选择" clearable filterable remote reserve-keyword
              :remote-method="queryCustomerNamecommon" :loading="loading">
              <el-option v-for="item in customerNameOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button class="btn" @click="dialogVisible = false">取 消</el-button>
        <el-button class="btn" type="primary" @click="handAddSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as echarts from "echarts"
import {
  getBondcommon,
  getCustomercommon
} from "@/api/eigen/groupManagement.js";

import {
  queryCustomerinfo
} from "@/api/eigen/persona.js";

var pieChartData = [{
  name: "保险",
  value: "20"
}, {
  name: "基金",
  value: "10"
}, {
  name: "金融贷款",
  value: "25"
}, {
  name: "证券及其他",
  value: "15"
}, {
  name: "银行",
  value: "30"
}]
var ringChartData = [
  { value: 44, name: '高资金机构' },
  { value: 24, name: '中高资金机构' },
  { value: 15, name: '中等资金机构' },
  { value: 8, name: '浮动资金机构' },
  { value: 4, name: '中低资金机构' },
  { value: 5, name: '低资金机构' }
]

export default {
  data () {
    return {
      pieChartOption: {
        tooltip: {},
        legend: {
          right: 0,  //图例组件离右边的距离
          orient: 'horizontal',  //布局  纵向布局 图例标记居文字的左边 vertical则反之
          width: 40,      //图行例组件的宽度,默认自适应
          x: 'right',   //图例显示在右边
          y: 'center',   //图例在垂直方向上面显示居中
          itemWidth: 10,  //图例标记的图形宽度
          itemHeight: 10, //图例标记的图形高度
          formatter: (name) => {
            let data = pieChartData;
            let total = 0;
            let target;
            for (let i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            return name + " " + target + '%'
          },
          textStyle: {    //图例文字的样式
            color: '#ffffff',  //文字颜色
            fontSize: 12    //文字大小
          },
          data: ['保险', '基金', '金融贷款', '证券及其他', '银行']
        },
        color: ['#FDD74C', '#47EAFD', '#44FF98', '#CDCFDE', '#2FA3FF'],
        series: [{
          name: "",
          type: "pie",
          hoverAnimation: false,
          startAngle: -180,
          radius: ["20%", "60%"],
          center: ["41%", "50%"],
          roseType: 'radius',
          label: {
            normal: {
              show: true,
              position: "inner", //显示在扇形上
              formatter: "", //显示内容
              textStyle: {
                color: "black", // 改变标示文字的颜色
                fontSize: 12, //文字大小
                fontWeight: "bold"
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            name: "保险",
            value: "20"
          }, {
            name: "基金",
            value: "10"
          }, {
            name: "金融贷款",
            value: "25"
          }, {
            name: "证券及其他",
            value: "15"
          }, {
            name: "银行",
            value: "30"
          }],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          }
        }]
      },
      scatterChartOption: {
        title: {
        },
        tooltip: {},
        legend: {
          selected: { 'x': false }
        },
        dataset: {
          dimensions: ['x', 'y'],
          source: [
            { type: 'apple', x: 1, y: 1 },
            { type: 'apple', x: 1, y: 3 },
            { type: 'apple', x: 4, y: 5 },
            { type: 'apple', x: 30, y: 25 },
            { type: 'apple', x: 30, y: 50 },
            { type: 'apple', x: 100, y: 150 },
            { type: 'apple', x: 50, y: 230 },
            { type: 'apple', x: 340, y: 500 },
            { type: 'apple', x: 540, y: 400 },
            { type: 'apple', x: 960, y: 800 },
            { type: 'apple', x: 2, y: 1 },
            { type: 'apple', x: 3, y: 3 },
            { type: 'apple', x: 6, y: 4 },
            { type: 'apple', x: 27, y: 30 },
            { type: 'apple', x: 35, y: 60 },
            { type: 'apple', x: 170, y: 150 },
            { type: 'apple', x: 345, y: 237 },
            { type: 'apple', x: 352, y: 460 },
            { type: 'apple', x: 573, y: 756 },
            { type: 'apple', x: 810, y: 950 },
          ]
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 0,
              type: "solid"
            }
          },
          splitLine: {
            show: false
          },
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 0,
              type: "solid"
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            type: 'scatter',
            symbolSize: 5,
            itemStyle: {
              color (params) {
                if (params.value.type == 'apple') {
                  return '#2F99EB'
                } else {
                  return '#6df'
                }
              }
            }
          }
        ]
      },
      ringChartOption: {
        title: {
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color: ['#48cda6', '#fd87fb', '#11abff', '#ffdf6f', '#968ade', '#990099'],
        legend: {
          right: 0,  //图例组件离右边的距离
          orient: 'horizontal',  //布局  纵向布局 图例标记居文字的左边 vertical则反之
          width: 40,      //图行例组件的宽度,默认自适应
          x: 'right',   //图例显示在右边
          y: 'center',   //图例在垂直方向上面显示居中
          itemWidth: 10,  //图例标记的图形宽度
          itemHeight: 10, //图例标记的图形高度
          formatter: (name) => {
            let data = ringChartData;
            let total = 0;
            let target;
            for (let i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            return name + " " + target + '%'
          },
          textStyle: {    //图例文字的样式
            color: '#ffffff',  //文字颜色
            fontSize: 12    //文字大小
          }
        },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            center: ['35%', '50%'],
            radius: ['42%', '50%'],
            label: {
            },
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              },
              emphasis: {
                label: {
                  show: true,
                  position: 'center',
                  textStyle: {
                    fontSize: '10',
                    fontWeight: 'bold'
                  }
                }
              }
            },
            data: [
              { value: 44, name: '高资金机构' },
              { value: 24, name: '中高资金机构' },
              { value: 15, name: '中等资金机构' },
              { value: 8, name: '浮动资金机构' },
              { value: 4, name: '中低资金机构' },
              { value: 5, name: '低资金机构' }
            ]
          }]
      },
      fanChartOption: {
        legend: {
          textStyle: {    //图例文字的样式
            color: '#ffffff',  //文字颜色
            fontSize: 8   //文字大小
          }
        },
        series: [
          {
            type: 'pie',
            radius: "60%",
            center: ["50%", "60%"],
            roseType: 'radius',
            label: {
              show: true,
              formatter: function (arg) {
                return arg.data.value + '%'
              }
            },
            data: [
              { value: 18, name: "金融债", },
              { value: 25, name: "企业债" },
              { value: 6, name: "企业短期融资债" },
              { value: 27, name: "中期票据" },
              { value: 16, name: "可转债" },
              { value: 1, name: "同业存单" },
              { value: 1, name: "资产支持债券" },
              { value: 4, name: "国债" }
            ]
          }
        ]
      },
      lineChartOption: {
        legend: {
          textStyle: {
            color: "#fff"
          },
          itemWidth: 14,
          itemHeight: 10,
          itemGap: 13,
          data: ['国债', '企业债', '可转债', '央行票据']
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 0,
              type: "solid"
            }
          },
          data: ['2016-03', '2016-06', '2016-09', '2016-12', '2017-03', '2017-06', '2017-09']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 0,
              type: "solid"
            }
          }
        },
        label: {},
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            name: '国债',
            data: [82, 93, 90, 93, 12, 13, 32],
            type: 'line'
          },
          {
            name: '企业债',
            data: [62, 71, 82, 93, 14, 56, 78],
            type: 'line'
          },
          {
            name: '可转债',
            data: [61, 92, 40, 60, 90, 23, 32],
            type: 'line'
          },
          {
            name: '央行票据',
            data: [34, 32, 45, 56, 78, 99, 12],
            type: 'line'
          }
        ]
      },
      dialogVisible: false,
      loading: false,
      customerId: '',
      customerName: '',
      customerNameOptions: [{
        label: '',
        code: ''
      }],
      cumlativeAmount: '',
      txFrequency: '',
      tableData: []
    }
  },
  filters: {
    filterNum (value) {
      const str = value ? value.toString() : '';
      if (str) {
        const reg =
          str.indexOf('.') > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
        const returnData = str.replace(reg, ',');
        return returnData;
      } else {
        return ''
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      let scatterChartDom = document.getElementById("scatterCharts")
      let scatterChart = echarts.init(scatterChartDom)
      scatterChart.setOption(this.scatterChartOption)
      let pieChartDom = document.getElementById("pieCharts")
      let pieChart = echarts.init(pieChartDom)
      pieChart.setOption(this.pieChartOption)
      let ringChartDom = document.getElementById("ringCharts")
      let ringChart = echarts.init(ringChartDom)
      ringChart.setOption(this.ringChartOption)
      let fanChartDom = document.getElementById("fanCharts")
      let fanChart = echarts.init(fanChartDom)
      fanChart.setOption(this.fanChartOption)
      let lineChartDom = document.getElementById("lineCharts")
      let lineChart = echarts.init(lineChartDom)
      lineChart.setOption(this.lineChartOption)
    })
  },
  methods: {
    formatterNum (row, cloumn, cellValue, index) {
      const str = cellValue;
      if (str) {
        const reg =
          str.indexOf('.') > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
        const returnData = str.replace(reg, ',');
        return returnData;
      } else {
        return ''
      }
    },
    tabFn (i) {
      this.tabIndex = i
    },
    handleAdd () {
      this.dialogVisible = true;
    },
    handleClose (done) {
      this.dialogVisible = false
    },
    handAddSubmit () {
      let _this = this
      _this.dialogVisible = false
      console.info(_this.customerId)
      let options = _this.customerNameOptions.filter((option) => {
        return option.value == _this.customerId
      })
      _this.customerName = options[0].label
      queryCustomerinfo({
        customerId: _this.customerId
      }).then(res => {
        _this.tableData = res.data.txData
        _this.cumlativeAmount = res.data.cumlativeAmount
        _this.txFrequency = res.data.txFrequency
      })
    },
    queryCustomerNamecommon (query) {
      let _this = this
      if (query) {
        _this.loading = true;
        getCustomercommon({
          customerNM: query
        }).then(res => {
          _this.loading = false;
          _this.customerNameOptions = []
          res.data.result.forEach((item) => {
            _this.customerNameOptions.push({
              label: item.customerNM,
              value: item.customerID
            })
          })
        })
      } else {
        _this.customerNameOptions = []
      }
    },
    queryCustomerIdcommon (query) {
      let _this = this
      if (query) {
        _this.loading = true;
        getCustomercommon({
          customerId: query
        }).then(res => {
          _this.loading = false;
          _this.customerNameOptions = []
          res.data.result.forEach((item) => {
            _this.customerNameOptions.push({
              label: item.customerNM,
              value: item.customerID
            })
          })
        })
      } else {
        _this.customerNameOptions = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  min-width: 350px;
  min-height: 350px;
  width: 100%;
  height: 100%;
  margin-top: 10px;
}

#lineCharts {}

.el-row {
  margin-bottom: 15px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-select {
  width: 50%;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px 10px;
  height: 73.3px;
}

.col {
  display: flex;
  flex-direction: column;
}

.item {
  padding: 10px 10px 0px 10px;
  display: flex;
  justify-content: space-between;

  .value {
    font-size: 14px;
  }
}

.box {
  .el-select-dropdown {
    padding: 10px 0px !important;
  }

  .card {
    background-color: #262d47;
    color: #959fc5;

    .header {
      width: 100%;
      padding: 10px 10px;
      background-color: #354060;
    }

    .content {
      padding: 0px 10px 10px 10px;
      width: 100%;
      height: 100%;
    }

    .title {
      font-size: 14px;
    }

    .info {
      display: flex;
      padding: 10px 10px;

      .infoItem {
        flex: 1;

        div:not(:last-child) {
          margin-bottom: 10px;
        }
      }
    }
  }

  .form-item {
    padding: 5px 10px;

    .label {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      margin-right: 20px;
    }
  }

  .group-detail {
    height: 100%;
    margin-top: 10px;
  }

  .btn-group {
    padding: 10px 5px;
  }

  .infoItemLabel {
    margin-right: 10px;
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }
}
</style>